<template>
  <div class="phone">
    <div class="info">
      <p class="info-hint">请输入手机号</p>
      <p class="info-friend">为了保证您的会员权益，请先绑定手机</p>
    </div>
    <van-cell-group>
      <van-field
        v-model="mobile"
        label="中国+86"
        placeholder="请输入您的手机号"
        label-width="4rem"
        center
      />
      <van-field
        v-model="code"
        label="验证码"
        label-width="4rem"
        placeholder="请输入验证码"
        center
      >
        <template #button>
          <van-button size="small" class="codeBtn" @click="getCode"
            >获取验证码</van-button
          >
        </template>
      </van-field>
    </van-cell-group>
    <p class="info-tip">
      没收到短信？点击<span class="code-info">
        获取语音验证码
      </span>
    </p>
    <van-button
      round
      type="info"
      color="#fe4854"
      style="margin-top:15px;height:45px"
      size="large"
      @click="onSubmit"
      >确定</van-button
    >
  </div>
</template>

<script>
// @ is an alias to /src
import { getCodeFun, bangdingPhone } from "@/api/index";
export default {
  name: "Home",
  components: {},
  data() {
    return {
      mobile: "",
      code: ""
    };
  },
  methods: {
    onSubmit() {
      let data = {
        mobile: this.mobile,
        code: this.code
      };
      console.log(data);
      bangdingPhone(data).then(res => {
        console.log(res);
      });
    },
    getCode() {
      let data = {
        mobile: this.mobile
      };
      getCodeFun(data).then(res => {
        console.log(res);
      });
    }
  },
  created() {
  
  }
};
</script>
<style lang="" scoped>
body,
html,
#app,
.phone {
  width: 100%;
  height: 100%;
  padding: 5px;
  box-sizing: border-box;
}
.info-hint {
  font-size: 16px;
  color: #373737;
  margin-top: 10px;
}
.info-friend {
  color: #858585;
  margin-top: 10px;
  font-size: 13px;
}
.code-info {
  color: #da4970;
  font-weight: bold;
  margin: 0;
}
.info-tip {
  color: #858585;
  margin-top: 15px;
  font-size: 13px;
}

.codeBtn {
  outline: none;
  border: none;
  color: #da4970;
}

[class*="van-hairline"]::after {
  border: none;
}
.van-cell::after {
  display: none;
}
</style>
